<template>
  <div class="vpn-container">
    <div class="content">
      <div
        class="adv-slogans"
        v-animate="{
          classes: 'fadeInDown',
        }"
      >
        <p class="title t01">Leensa</p>
        <p class="title t02">翻墙最快最稳妥</p>
      </div>

      <div
        class="anim-phone"
        v-animate="{
          classes: 'fadeInUp',
        }"
      ></div>

      <div
        class="info"
        v-animate="{
          classes: 'bounceIn',
          delay: 500,
        }"
      >
        <img src="@/assets/img/qrcode.png" width="168" />
        <p class="tip-txt">扫码注册</p>
        <a
          href="https://leensc.com/#/register?code=obwWJxuY"
          target="_blank"
          class="mi-btn reg-link"
          >点击注册</a
        >
        <a
          href="https://leensc.org/?#/login"
          target="_blank"
          class="mi-btn mi-btn-primary mt16"
          >立即试用</a
        >
      </div>

      <div
        class="move-box"
        v-animate="{
          classes: 'zoomIn',
          delay: 360,
        }"
      >
        <div
          class="move-block"
          v-for="item in 9"
          :style="`transform: rotate(${item * 40 + moveRotateVal}deg)`"
        >
          <img
            :src="svgArr[item - 1]"
            :style="`transform: rotate(${
              360 - (item * 40 + moveRotateVal)
            }deg)`"
          />
        </div>
      </div>
    </div>
    <ContactPop />
  </div>
</template>

<script setup lang="ts">
import facebook from "@/assets/img/avd-icon/facebook.svg";
import gmail from "@/assets/img/avd-icon/gmail.svg";
import ins from "@/assets/img/avd-icon/ins.svg";
import line from "@/assets/img/avd-icon/line.svg";
import netflix from "@/assets/img/avd-icon/netflix.svg";
import telegram from "@/assets/img/avd-icon/telegram.svg";
import twitter from "@/assets/img/avd-icon/twitter.svg";
import whatsapp from "@/assets/img/avd-icon/whatsapp.svg";
import youtube from "@/assets/img/avd-icon/youtube.svg";
import ContactPop from "@/components/ContactPop.vue";
import { nextTick, onMounted, ref } from "vue";

const svgArr = [
  facebook,
  gmail,
  ins,
  line,
  netflix,
  telegram,
  twitter,
  whatsapp,
  youtube,
];

// 另一种方式获取图片资源
// const imgMap = import.meta.glob(
//   "/src/assets/img/avd-icon/*.{png,svg,jpg,jpeg}",
//   {
//     eager: true,
//     import: "default",
//   }
// );
// const imgArr = [];

// for (let item in imgMap) {
//   imgArr.push(item);
// }

// console.log("imgArr", imgArr);
// console.log("imgMap", imgMap);

const moveRotateVal = ref(0);

const setVal = () => {
  moveRotateVal.value = moveRotateVal.value + 0.2;
  if (moveRotateVal.value >= 360) {
    moveRotateVal.value = 0;
  }
  requestAnimationFrame(setVal);
};

onMounted(() => {
  nextTick(() => {
    setVal();
  });
});
</script>
